<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <link rel="shortcut icon" href="../favicon.png" type="image/x-icon" />
    <title>Kreogist μ - The way it's meant to be heard</title>
    <link rel="stylesheet" href="../stylesheets/styles.css">
    <link rel="stylesheet" href="../stylesheets/pygment_trac.css">
    <script type="text/javascript" src="../javascripts/respond.js"></script>
    <script type="text/javascript" src="../javascripts/classie.js"></script>
    <script type="text/javascript" src="javascripts/kaji.js"></script>
    <script type="text/javascript" src="../javascripts/kcommon.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lt IE 8]>
    <link rel="stylesheet" href="stylesheets/ie.css">
    <![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  </head>
  <body id="features-page">
    <script>kaji.writeBanner("", "features.html");</script>
    <div class="wrapper">
        <div id="title">
          <section id="born-for-music">
            <h1>Remember all your music</h1>
            <p>μ is born for music. Make your albums shine in a stunning new interface. Thanks to built-in search, find any song with only a few keystrokes. μ is tailored to be the best way for you to enjoy your music.</p>
            <img id="mu-logo" src="../images/mu-logo.png" alt="mu-logo">
          </section>
          <section id="lossless">
            <h2>Lossless, no less</h2>
            <p>Playing music is the heart of a music player, and the sound quality is its backbone. μ  supports a variety of lossless music formats, including MP3, AAC and other popular audio formats*. The only thing you need to do is plug in your headphones, listen, and enjoy.</p>
            <div id="music-tag1" class="music-tags"></div>
            <div id="music-tag2" class="music-tags"></div>
            <div id="music-tag3" class="music-tags"></div>
            <div id="music-tag4" class="music-tags"></div>
            <div id="music-tag5" class="music-tags"></div>
            <div id="music-tag6" class="music-tags"></div>
            <div id="music-tag7" class="music-tags"></div>
            <div id="music-tag8" class="music-tags"></div>
          </section>
          <section id="enjoy-concert">
            <h2>A personal concert, everywhere</h2>
            <p>Based on the rock-solid Qt development framework, μ can run on all mainstream operating systems. Its strong foundation provides for high performance and an excellent user experience. Your computer is only waiting for you to start the concert.</p>
            <img src="../images/preview-mac.png"   alt="preview-mac"   class="preview-pcs" id="preview-mac">
            <img src="../images/preview-linux.png" alt="preview-linux" class="preview-pcs" id="preview-linux">
            <img src="../images/preview-win.png"   alt="preview-win"   class="preview-pcs" id="preview-win">
          </section>
          <section id="open-source">
            <h2>Open-Source Force</h2>
            <p>μ is based on a number of open-source projects, and μ itself is open-source. We work so μ can continue to evolve, and meet your personalized desires. Anyone can download, build, and use our source code—completely free of charge. We also provide technical documentation, and timely online support.</p>
            <img src="../images/open-source.png" alt="open-source" id="open-source-logo">
            <img src="../images/ffmpeg-logo.png" class="opensource-logos" alt="ffmpeg-logo" id="ffmpeg-logo">
            <img src="../images/qt-logo.png"     class="opensource-logos" alt="qt-logo"     id="qt-logo">
            <img src="../images/vlc-logo.png"    class="opensource-logos" alt="vlc-logo"    id="vlc-logo">
          </section>
		  <section>
		    <h2>Start your concert now!</h2>
			<p><img src="../images/start_your_concert.png"></p>
			<p><a href="downloads.html">Download μ today!</a></p>
		  </section>
      <footer>
        <script>kaji.writeFooter("");</script>
          </footer>
        </div>
    </div>
    <!--add parallax effect-->
    <div id="parallax-fore"></div>
    <!--[if !IE]><script>fixScale(document);</script><![endif]-->
    <script type="text/javascript">
    (function(){

      var foreLayer,
          backLayer,
          sectionBoxes,
          sectionBoxesHeight;

      function reactType(y) {
        //-1 : before active
        //0  : now active
        //1  : after active
        if ( ( y > (0.70)*sectionBoxesHeight ) ) {
          return -1;
        } else if ( y < (0.1)*sectionBoxesHeight ) {
          return 1;
        } else {
          return 0;
        }
      }

      function iconReactType(y) {
        //-1 : before active
        //0  : now active
        //1  : after active
        if ( ( y < (-0.25)*sectionBoxesHeight ) ) {
          return 1;
        } else  {
          return 0;
        }
      }

      function setState(sectionBox){
        var state;
        if (sectionBox.id == "born-for-music"){
          state = iconReactType( sectionBox.getBoundingClientRect().top );
        } else {
          state = reactType( sectionBox.getBoundingClientRect().top );
        }

        switch (state) {
          case 1:
            sectionBox.setAttribute("class", "after-active");
            break;
          case -1:
            sectionBox.setAttribute("class", "before-active");
            break;
          case 0:
            sectionBox.setAttribute("class", "now-active");
            break;
        }
      }

      function applyState() {
        for (var i = 0;i < sectionBoxes.length;i++) {
          (function(i) {
            var j = i;
            setState(sectionBoxes[j]);
          }
          )(i);
        }
      }

      function kajiScroll(){
        //start parallax
        var Y = window.pageYOffset;
        backLayer.style.backgroundPosition = " 0 -" + Y*0.6 + "px";
        foreLayer.style.backgroundPosition = " 0 -" + Y*0.8 + "px";
        //end parallax

        applyState();
      }

      function init(){
        foreLayer = document.getElementById("parallax-fore");
        backLayer = document.body;
        sectionBoxes = Array.prototype.slice.call( document.querySelectorAll("#title>section") );
        sectionBoxesHeight = sectionBoxes[0].getBoundingClientRect().height;
        window.addEventListener("scroll",kajiScroll);
        applyState();
      }

      init();

    })();
    </script>
  </body>
</html>
